<template>
  <div class="boxbig">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      fixed
      v-show="!showSofa"
    >
      <template #title>
        <div class="nav-author" v-show="showNavAuthor">
          <van-image round width="25px" height="25px" :src="list.aut_photo" />
          <span class="name">{{ list.aut_name }}</span>
          <span class="line">|</span>
          <span class="follow">关注</span>
        </div>
      </template>
      <template #right>
        <van-icon
          name="ellipsis"
          size="24px"
          @click="showShare = true"
        ></van-icon>
      </template>
    </van-nav-bar>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <!-- 文章主体 -->
    <div class="article-wrapper" ref="wrapper" @scroll="onScroll">
      <!-- 头部：标题 时间 作者 -->
      <div class="header" ref="header">
        <h2 class="title">
          {{ list.title }}
        </h2>
        <div class="time">
          <span>{{ list.pubdate }}</span>
          <span>|</span>
          <span>{{ list.read_count }} 阅读</span>
          <span>|</span>
          <span>{{ list.comm_count }} 评论</span>
        </div>
        <div class="author van-hairline--bottom">
          <van-image round width="10vw" height="10vw" :src="list.aut_photo" />
          <span class="name">{{ list.aut_name }}</span>
          <!-- <span>{{$route.query.id}}</span> -->
          <van-button round size="small" color="#FC6627">+关注</van-button>
        </div>
      </div>
      <!-- 内容：文章内容 -->
      <div class="main" ref="main">
        <div class="html" v-html="list.content"></div>
        <div class="space"></div>
      </div>

      <!-- 评论：评论组件 -->\
      <article-comment ref="myElement" :data='data'></article-comment>
      <div class="footer van-hairline--top">
        <div class="input" @click="showSofa = true">
          <i class="van-icon van-icon-edit"></i>
        </div>
        <!-- 弹出评论文章 -->
        <van-popup
          v-model="showSofa"
          position="bottom"
          :style="{ height: '100%' }"
        >
          <van-nav-bar
            title="评论文章"
            left-text=""
            right-text="发表"
            left-arrow
            @click-left="showSofa = false"
            @click-right="onClickRight"
          /><van-field
            v-model="value"
            placeholder="说点什么吧~~~"
            class="pingluntext"
            maxlength="100"
            show-word-limit
             type="textarea"
            autosize
          ></van-field>
        </van-popup>

        <div class="btn" @click='scrollTo'>
          <van-icon name="chat-o"></van-icon>
          <p>评论</p>
        </div>
        <div class="btn" @click="dianzan">
          <van-icon
            :name="list.attitude === 1 ? 'good-job' : 'good-job-o'"
            :class="{ color: list.attitude === 1 ? true : false }"
          ></van-icon>
          <p>点赞</p>
        </div>
        <div class="btn" @click="shoucang">
          <van-icon
            :name="list.is_collected ? 'like' : 'like-o'"
            :class="{ color: list.is_collected }"
          ></van-icon>
          <p>收藏</p>
        </div>
        <div class="btn" @click="showShare = true">
          <van-icon name="share-o"></van-icon>
          <p>分享</p>
        </div>
        <!-- 点击分享 -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  getArticleItem,
  ArticleItemDianZan,
  ArticleItemDianZanNo,
  ArticleItemShouCang,
  ArticleItemShouCangNo,
  Comments,
  getComments
} from '@/api/article'
import ArticleComment from './ArticleComment.vue'
// import ArticleIdexButton from './ArticleIdexButton.vue'
export default {
  components: { ArticleComment },
  // components: { ArticleIdexButton },
  name: 'ArticleItem',
  data () {
    return {
      showComment: 1,
      list: {},
      data: [],
      showNavAuthor: true,
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ],
      showSofa: false,
      value: ''
    }
  },
  created () {
    this.getArticleItem1()
    this.getComments1()
  },
  methods: {
    async getComments1 () {
      console.log('你好')
      const res = await getComments({ type: 'a', source: this.$route.params.id })
      console.log(res.data.results)
      this.data = res.data.results
    },

    scrollTo () {
      if (this.showComment === 1) {
        const headerHeight = this.$refs.header.offsetHeight
        const mainHeight = this.$refs.main.offsetHeight
        window.scrollTo({ top: headerHeight + mainHeight, behavior: 'smooth' })
        this.showComment = 0
      } else {
        window.scrollTo({ top: 0, behavior: 'smooth' })
        this.showComment = 1
      }
    },
    async dianzan () {
      if (this.list.attitude === 1) {
        const res = await ArticleItemDianZanNo(this.list.art_id)
        console.log(res)
        this.list.attitude = -1
      } else {
        const res = await ArticleItemDianZan({ target: this.list.art_id })
        console.log(res)
        this.list.attitude = 1
      }
      this.getArticleItem1()
      this.$toast.success('操作成功')
    },
    async shoucang () {
      if (this.list.is_collected) {
        const res = await ArticleItemShouCangNo(this.list.art_id)
        console.log(res)
        this.list.is_collected = false
      } else {
        const res = await ArticleItemShouCang({ target: this.list.art_id })
        console.log(res)
        this.list.is_collected = true
      }
      this.getArticleItem1()
      this.$toast.success('操作成功')
    },
    async getArticleItem1 () {
      try {
        const res = await getArticleItem(this.$route.params.id)
        console.log(res)
        this.list = res.data
        console.log(this.list)
      } catch (error) {
        console.log(error)
      }
    },
    // 监听滚动
    onScroll (event) {
      console.log('我滚了')
      event.stopPropagation() // 阻止事件冒泡
      const scrollTop = this.$refs.wrapper.scrollTop
      const headerHeight = this.$refs.header.offsetHeight
      this.showNavAuthor = scrollTop > headerHeight
    },
    async onClickRight () {
      console.log('提交')
      const res = await Comments({ target: this.list.art_id, content: this.value })
      console.log(res)
      this.value = ''
      this.showSofa = false
      this.$toast.success('评论成功')
    }
  }
}
</script>

<style lang='less' scoped>
.nav-author {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /deep/ .van-nav-bar__title {
    max-width: 270px;
    width: 270px;
  }
}
.van-nav-bar .van-icon {
  color: #000;
}
.article-wrapper {
  height: 100%;
  overflow: auto;
  padding: 44px 15px 50px;
  .header {
    padding: 0px 0px 15px 0px;
    .title {
      font-size: 26px;
      font-weight: normal;
    }
    .author {
      display: flex;
      align-items: center;
      padding: 10px 0;
    }
  }
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 50px;
  background: #fff;
  display: flex;
  width: 100%;
  align-items: center;
  .input {
    &.big {
      width: 260px;
    }
    margin-left: 10px;
    width: 200px;
    height: 34px;
    // background: @van-gray-color;
    border-radius: 17px;
    line-height: 36px;
    padding-left: 10px;
    .van-icon {
      color: #999;
    }
  }
  .btn {
    flex: 1;
    text-align: center;
    position: relative;
    p {
      margin: 0;
      font-size: 10px;
    }
    .van-icon {
      font-size: 18px;
    }
    .color {
      color: #ff5f2b;
    }
  }
}
.pingluntext {
  height: 100px;
  width: 90%;
  margin-left: 5%;
  background-color: #f7f8fa;
}
</style>
